<template>
  <div>监考报名  |  报名详情</div>
  <div class="exam-batch-detail">
    <div class="header-section">
      <h2>{{ batch.name }} - {{ batch.subject }}</h2>
      <div class="batch-info">
        <span class="batch-id">监考批次ID: {{ batch.id }}</span>
        <span :class="getStatusClass(batch.status)">
          {{ getStatusText(batch.status) }}
        </span>
      </div>
    </div>

    <div class="detail-section">
      <div class="batch-details">
        <div class="detail-item">
          <label>报名开始:</label>
          <span>{{ formatDate(batch.signupStart) }}</span>
        </div>
        <div class="detail-item">
          <label>报名截止:</label>
          <span>{{ formatDate(batch.signupEnd) }}</span>
        </div>
        <div class="detail-item">
          <label>创建时间:</label>
          <span>{{ formatDate(batch.createdAt) }}</span>
        </div>
        <div class="detail-item">
          <label>教室号:</label>
          <span>{{ batch.classroom }}</span>
        </div>
        <div class="detail-item">
          <label>监考说明:</label>
          <span>{{ batch.description || '无特殊说明' }}</span>
        </div>

        <div class="attachment-section">
          <label>上传附件:</label>
          <div class="attachment">
            <span class="attachment-icon">📎</span>
            <span class="attachment-name">监考安排说明.docx</span>
          </div>
        </div>
      </div>

      <div class="exam-schedule">
        <h3>考试安排</h3>
        <div class="schedule-item">
          <div class="exam-info">
            <span class="exam-name">{{ batch.examName }}</span>
            <span class="exam-campus">校区: {{ batch.campus }}</span>
            <span class="exam-address">地址: {{ batch.address }}</span>
            <span class="exam-time">时间: {{ formatExamTime(batch.examTime) }}</span>
          </div>
        </div>
      </div>
    </div>

    <div class="records-section">
      <h3>报名记录</h3>
      <div class="records-table">
        <table>
          <thead>
          <tr>
            <th>序号</th>
            <th>姓名</th>
            <th>工号</th>
            <th>部门</th>
            <th>报名时间</th>
            <th>状态</th>
          </tr>
          </thead>
          <tbody>
          <tr v-for="(record, index) in signupRecords" :key="record.id">
            <td>{{ index + 1 }}</td>
            <td>{{ record.name }}</td>
            <td>{{ record.employeeId }}</td>
            <td>{{ record.department }}</td>
            <td>{{ formatDateTime(record.signupTime) }}</td>
            <td>
                <span :class="getRecordStatusClass(record.status)">
                  {{ getRecordStatusText(record.status) }}
                </span>
            </td>
          </tr>
          </tbody>
        </table>
      </div>
    </div>

    <div class="action-section">
      <button class="action-btn back-btn" @click="goBack">
        返回列表
      </button>
      <button
          v-if="batch.status === 'active'"
          class="action-btn signup-btn"
          @click="handleSignup"
      >
        我要报名
      </button>
    </div>

    <div class="warning-text">
      <span>注意！！一个批次只能报名一次</span>
    </div>
  </div>

  <!-- 添加确认弹窗 -->
  <div v-if="showConfirmDialog" class="confirm-dialog-overlay">
    <div class="confirm-dialog">
      <h3>确认提交</h3>
      <p>确定要提交报名申请吗？</p>
      <div class="dialog-buttons">
        <button class="cancel-btn" @click="showConfirmDialog = false">取消</button>
        <button class="confirm-btn" @click="confirmSignup">确认</button>
      </div>
    </div>
  </div>

  <!-- 添加提交成功提示 -->
  <div v-if="showSuccessMessage" class="success-message">
    <span>✓ 提交成功！</span>
  </div>
</template>



<script setup lang="ts">
import { ref, onMounted } from 'vue';

import { useRoute, useRouter } from 'vue-router';
// 添加响应式变量
const showConfirmDialog = ref(false);
const showSuccessMessage = ref(false);

// 路由实例
const route = useRoute();
const router = useRouter();

// 监考批次数据结构
interface ExamBatch {
  id: number;
  name: string;
  subject: string;
  classroom: string;
  signupStart: string;
  signupEnd: string;
  createdAt: string;
  status: 'active' | 'upcoming' | 'ended' | 'full';
  description?: string;
  examName?: string;
  campus?: string;
  address?: string;
  examTime?: string;
}

// 报名记录数据结构
interface SignupRecord {
  id: number;
  name: string;
  employeeId: string;
  department: string;
  signupTime: string;
  status: 'confirmed' | 'pending' | 'rejected';
}

// 当前批次数据
const batch = ref<ExamBatch>({
  id: 0,
  name: '',
  subject: '',
  classroom: '',
  signupStart: '',
  signupEnd: '',
  createdAt: '',
  status: 'upcoming',
  description: '监考说明监考说明监考说明',
  examName: '2023年A级2023监考报告',
  campus: '南湖校区',
  address: '南湖路4-111',
  examTime: '2023-09-13T08:00:00'
});

// 报名记录数据
const signupRecords = ref<SignupRecord[]>([
  { id: 1, name: '赵老师', employeeId: 'K10001', department: '计算机学院', signupTime: '2023-11-05T10:30:00', status: 'confirmed' },
  { id: 2, name: '李老师', employeeId: 'K10002', department: '数学学院', signupTime: '2023-11-05T11:15:00', status: 'confirmed' },
  { id: 3, name: '王老师', employeeId: 'K10003', department: '外语学院', signupTime: '2023-11-06T09:45:00', status: 'pending' },
  { id: 4, name: '赵老师', employeeId: 'K10004', department: '物理学院', signupTime: '2023-11-06T14:20:00', status: 'confirmed' }
]);

// 初始化加载批次数据
onMounted(() => {
  const batchId = Number(route.params.id);

  // 模拟API请求获取批次数据
  setTimeout(() => {
    const mockData: ExamBatch = {
      id: batchId,
      name: '2023年6月期末考试',
      subject: '高等数学',
      classroom: '一教301',
      signupStart: '2023-05-01',
      signupEnd: '2023-05-15',
      createdAt: '2023-04-20',
      status: 'ended',
      description: '监考说明监考说明监考说明',
      examName: '2023年A级2023监考报告',
      campus: '南湖校区',
      address: '南湖路4-111',
      examTime: '2023-09-13T08:00:00'
    };

    batch.value = mockData;
  }, 300);
});

// 状态处理函数
const getStatusText = (status: string) => {
  const statusMap: Record<string, string> = {
    'active': '进行中',
    'upcoming': '未开始',
    'ended': '已结束',
    'full': '已报满'
  };
  return statusMap[status] || status;
};

const getStatusClass = (status: string) => {
  const classMap: Record<string, string> = {
    'active': 'status-active',
    'upcoming': 'status-upcoming',
    'ended': 'status-ended',
    'full': 'status-full'
  };
  return classMap[status] || '';
};

const getRecordStatusText = (status: string) => {
  const statusMap: Record<string, string> = {
    'confirmed': '已确认',
    'pending': '待审核',
    'rejected': '已拒绝'
  };
  return statusMap[status] || status;
};

const getRecordStatusClass = (status: string) => {
  const classMap: Record<string, string> = {
    'confirmed': 'status-confirmed',
    'pending': 'status-pending',
    'rejected': 'status-rejected'
  };
  return classMap[status] || '';
};

// 日期格式化
const formatDate = (dateString: string) => {
  const date = new Date(dateString);
  return `${date.getFullYear()}-${(date.getMonth() + 1).toString().padStart(2, '0')}-${date.getDate().toString().padStart(2, '0')}`;
};

// 日期时间格式化
const formatDateTime = (dateTimeString: string) => {
  const date = new Date(dateTimeString);
  return `${date.getFullYear()}-${(date.getMonth() + 1).toString().padStart(2, '0')}-${date.getDate().toString().padStart(2, '0')} ${date.getHours().toString().padStart(2, '0')}:${date.getMinutes().toString().padStart(2, '0')}`;
};

// 考试时间格式化
const formatExamTime = (dateTimeString: string) => {
  const date = new Date(dateTimeString);
  const days = ['日', '一', '二', '三', '四', '五', '六'];
  const period = date.getHours() < 12 ? '上午' : '下午';
  return `${date.getFullYear()}/${(date.getMonth() + 1).toString().padStart(2, '0')}/${date.getDate().toString().padStart(2, '0')} (周${days[date.getDay()]}) ${period}`;
};

const handleSignup = () => {
  showConfirmDialog.value = true;
};

// 添加确认提交函数
const confirmSignup = () => {
  showConfirmDialog.value = false;

  // 模拟提交逻辑
  setTimeout(() => {
    showSuccessMessage.value = true;

    // 3秒后关闭成功提示
    setTimeout(() => {
      showSuccessMessage.value = false;
    }, 3000);
  }, 500);
};


</script>

<style scoped>

/* 确认弹窗样式 */
.confirm-dialog-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
}

.confirm-dialog {
  width: 400px;
  background-color: white;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  padding: 25px;
  text-align: center;
}

.confirm-dialog h3 {
  margin-top: 0;
  margin-bottom: 15px;
  color: #1a2b4b;
  font-size: 20px;
}

.confirm-dialog p {
  margin-bottom: 25px;
  color: #4a5568;
  font-size: 16px;
}

.dialog-buttons {
  display: flex;
  justify-content: center;
  gap: 20px;
}

.dialog-buttons button {
  padding: 10px 25px;
  border: none;
  border-radius: 4px;
  font-size: 14px;
  cursor: pointer;
  transition: all 0.3s;
}

.cancel-btn {
  background-color: #f0f2f5;
  color: #1a2b4b;
}

.cancel-btn:hover {
  background-color: #e2e8f0;
}

.confirm-btn {
  background-color: #1a3a6c;
  color: white;
}

.confirm-btn:hover {
  background-color: #2c5282;
}

/* 成功提示样式 */
.success-message {
  position: fixed;
  top: 20px;
  left: 50%;
  transform: translateX(-50%);
  background-color: #f0fff4;
  color: #2e7d32;
  padding: 15px 30px;
  border-radius: 4px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  border: 1px solid #c6f6d5;
  z-index: 1001;
  animation: fadeInOut 3.5s ease-in-out;
}

@keyframes fadeInOut {
  0% { opacity: 0; top: 0; }
  10% { opacity: 1; top: 20px; }
  90% { opacity: 1; top: 20px; }
  100% { opacity: 0; top: 0; }
}



.exam-batch-detail {
  background-color: white;
  border-radius: 8px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
  padding: 25px;
}

.header-section {
  margin-bottom: 20px;
  padding-bottom: 15px;
  border-bottom: 1px solid #e2e8f0;
}

.header-section h2 {
  margin: 0 0 10px 0;
  font-size: 20px;
  color: #1a2b4b;
}

.batch-info {
  display: flex;
  align-items: center;
  gap: 15px;
}

.batch-id {
  font-size: 14px;
  color: #4a5568;
}

.detail-section {
  display: flex;
  gap: 30px;
  margin-bottom: 25px;
}

.batch-details, .exam-schedule {
  flex: 1;
}

.detail-item {
  display: flex;
  margin-bottom: 12px;
  font-size: 14px;
}

.detail-item label {
  font-weight: 500;
  color: #4a5568;
  min-width: 80px;
}

.detail-item span {
  color: #1a2b4b;
}

.attachment-section {
  display: flex;
  align-items: center;
  margin-top: 15px;
}

.attachment {
  display: flex;
  align-items: center;
  padding: 6px 12px;
  background-color: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.3s;
}

.attachment:hover {
  background-color: #edf2f7;
}

.attachment-icon {
  margin-right: 8px;
  font-size: 16px;
}

.attachment-name {
  font-size: 14px;
  color: #1a3a6c;
}

.exam-schedule {
  border-left: 1px solid #e2e8f0;
  padding-left: 30px;
}

.exam-schedule h3 {
  margin-top: 0;
  margin-bottom: 15px;
  font-size: 16px;
  color: #1a2b4b;
}

.schedule-item {
  background-color: #f8fafc;
  padding: 15px;
  border-radius: 6px;
  border: 1px solid #e2e8f0;
}

.exam-info {
  display: flex;
  flex-direction: column;
  gap: 8px;
  font-size: 14px;
}

.exam-name {
  font-weight: 500;
  color: #1a2b4b;
  margin-bottom: 5px;
}

.records-section {
  margin-bottom: 20px;
}

.records-section h3 {
  margin: 0 0 15px 0;
  font-size: 16px;
  color: #1a2b4b;
}

.records-table {
  overflow-x: auto;
}

table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
}

th, td {
  padding: 12px 15px;
  text-align: left;
  border-bottom: 1px solid #e2e8f0;
}

th {
  background-color: #f8fafc;
  color: #1a2b4b;
  font-weight: 600;
}

tr:hover {
  background-color: #f8fafc;
}

.status-active {
  color: #2e7d32;
  font-weight: 500;
}

.status-upcoming {
  color: #f57f17;
  font-weight: 500;
}

.status-ended {
  color: #666;
  font-weight: 500;
}

.status-full {
  color: #c62828;
  font-weight: 500;
}

.status-confirmed {
  color: #2e7d32;
  font-weight: 500;
}

.status-pending {
  color: #f57f17;
  font-weight: 500;
}

.status-rejected {
  color: #c62828;
  font-weight: 500;
}

.action-section {
  display: flex;
  justify-content: space-between;
  margin-top: 25px;
}

.action-btn {
  padding: 10px 25px;
  border: none;
  border-radius: 4px;
  font-size: 14px;
  cursor: pointer;
  transition: all 0.3s;
}

.back-btn {
  background-color: #f0f2f5;
  color: #1a2b4b;
  border: 1px solid #dcdfe6;
}

.back-btn:hover {
  background-color: #e2e8f0;
}

.signup-btn {
  background-color: #1a3a6c;
  color: white;
}

.signup-btn:hover {
  background-color: #2c5282;
}

.warning-text {
  margin-top: 15px;
  color: #c62828;
  font-size: 14px;
  font-weight: 500;
  text-align: center;
  padding: 10px;
  background-color: #fff8f8;
  border-radius: 4px;
  border: 1px solid #ffebee;
}
</style>